<template>
  <div>
    <scroll-view
      @onBashBottom="child_bottom"
      :height="'80vh'"
      :bottom_show="true"
      :bottom_text="'加载中...'"
    >
    <!-- 
      onBashBottom function 触底事件
      height String  滚动视图的高度
      bottom_text String 触底之后 的文字
      bottom_show Boolean 是否显示 触底文字
     -->
      <ul>
        <li v-for="(item,index) in list" :key="index">
          {{ item }}
        </li>
      </ul>
    </scroll-view>
  </div>
</template>

<script>
import scrollView from '@/components/scrollView.vue';
export default {
  data(){
    return{
      list: []
    }
  },
  methods: {
    child_bottom(){
      for (let index = 0; index < 10; index++) {
        this.list.push(index)
      }
    }
  },
  created(){
    for (let index = 0; index < 10; index++) {
      this.list.push(index)
      
    }
  },
  components: {
    scrollView
  }
}
</script>

<style lang="scss" scoped>
  li{
    height: 11vh;
    line-height: 11vh;
  }
</style>